<!--
 * @创建文件时间: 2021-06-01 22:41:21
 * @Auther: 猿小天
 * @最后修改人: 猿小天
 * @最后修改时间: 2021-07-29 19:27:29
 * 联系Qq:1638245306
 * @文件介绍:角色管理
-->
<template>
  <d2-container :class="{ 'page-compact': crud.pageOptions.compact }">
    <d2-crud-x
      ref="d2Crud"
      v-bind="_crudProps"
      :columns.sync="crud.columns"
      :form-options.sync="crud.formOptions"
      v-on="_crudListeners"
    >
      <div slot="header">
        <crud-search
          ref="search"
          :options="crud.searchOptions"
          @submit="handleSearch"
        />
        <el-button-group>
          <el-button
            size="small"
            v-permission="'Create'"
            type="primary"
            @click="addRow"
          ><i class="el-icon-plus"/> 新增
          </el-button
          >
        </el-button-group>
        <crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners"
                      @columns-filter-changed="columnsFilterChanged"/>
      </div>
    </d2-crud-x>
  </d2-container>
</template>

<script>
import * as api from './api'
import {crudOptions} from './crud'
import {d2CrudPlus} from 'd2-crud-plus'

export default {
  name: 'dynamic',
  components: {},
  mixins: [d2CrudPlus.crud],
  data() {
    return {}
  },
  methods: {
    async getCrudOptions() {
      const options = await crudOptions(this)
      return options
    },
    pageRequest(query) {
      return api.GetList(this, query)
    },
    addRequest(row) {
      return api.createObj(this, row)
    },
    updateRequest(row) {
      return api.UpdateObj(this, row)
    },
    delRequest(row) {
      return api.DelObj(this, row.id)
    },
    columnsFilterChanged(columns) {
      this.handleColumnsFilterChanged(columns)
    }
  }
}
</script>

<style lang="scss">
.yxtInput {
  .el-form-item__label {
    color: #49a1ff;
  }
}
</style>
